<template>
    <div class="local_box">
        <el-card class="box-card">
            <div class="title" slot="header">网络服务</div>
            <div class="ip">
                <el-input v-model="ipAddress" placeholder="请输入服务地址">
                    <template slot="prepend">http://</template>
                    <template slot="append">
                        <el-button class="input_button_bg" :loading="loading" slot="append" @click="linkStart">连接服务器</el-button>
                    </template>
                </el-input>
            </div>
        </el-card>
        <br><br>
        <el-card class="box-card" v-if="projectList">
            <div class="title" slot="header">
                项目列表
                <el-button style="float: right; padding: 3px 15px" icon="el-icon-plus" type="text" @click="newProject">
                    创建项目
                </el-button>
                <el-button style="float: right; padding: 3px 0" icon="el-icon-refresh" type="text" @click="getProjects">
                    刷新
                </el-button>
            </div>
            <el-table :data="projectList" style="width: 100%">
                <el-table-column prop="title" label="项目名称"></el-table-column>
                <el-table-column prop="createTime" :formatter="formatterDate" label="创建时间"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" icon="el-icon-video-play" @click="openWindows(scope.row)" title="打开项目窗口"></el-button>
                        <el-button size="mini" type="warning" icon="el-icon-edit" @click="editProject(scope.row)" title="编辑项目信息">
                        </el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteProject(scope.row)" title="删除项目">
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-drawer :title="projectEdit.title ? '编辑项目' : '新建项目'" :wrapperClosable="false" :direction="'ltr'" destroy-on-close size="700px" :visible.sync="editBox">
            <editProject :closeEvent="closeEdit" ref="projectEdit" :projectData="projectEdit"></editProject>
        </el-drawer>
    </div>
</template>
<script>
import editProject from './editSeverProject';
export default {
    components: {
        editProject
    },
    data() {
        return {
            loading: false,
            ipAddress: '',
            canUseLink: false,
            editBox: false,
            projectList: [],
            projectEdit: {
                title: '',
                description: '',
            },
        }
    },
    methods: {
        formatterDate(row, column, cellValue, inde) {
            return this.$moment(cellValue).format("YYYY-MM-DD");
        },
        getSeverLink() {
            window.action.GetSeverLink().then((res) => {
                this.loading = false;
                if (res.length) {
                    this.ipAddress = res[0].value;
                    this.linkStart();
                };
            });
        },
        getProjects() {
            window.action.getServeProjects(this.ipAddress, (res) => {
                this.projectList = res;
            });
        },
        linkStart() {
            this.loading = true;
            this.projectList = [];
            window.action.testServiceVersion(this.ipAddress, (res) => {
                this.loading = false;
                this.canUseLink = true;
                window.action.saveSeverLink(this.ipAddress, (res) => {
                    this.getProjects();
                })
            }, () => {
                this.loading = false;
                this.canUseLink = false;
            });
        },
        newProject() {
            this.projectEdit = {
                ip: this.ipAddress,
                title: '',
                description: '',
            };
            this.$nextTick(() => {
                this.editBox = true;
            });
        },
        openWindows(data) {
            this.$electron.ipcRenderer.send('open-content-window', JSON.stringify({
                service: this.ipAddress,
                // token : 
                project: data,
            }));
        },
        editProject(data) {
            this.projectEdit = data;
            this.projectEdit.ip = this.ipAddress;
            this.$nextTick(() => {
                this.editBox = true;
            });
        },
        deleteProject(data) {
            var ans = this.$confirm('是否删除项目 ' + data.title + ' ？');
            if (ans) {
                window.action.deleteSeverProject(this.ipAddress, data.projectId, () => {
                    this.$alert('删除成功');
                    this.getProjects();
                })
            };
        },
        closeEdit() {
            this.editBox = false;
            this.projectEdit = {
                title: '',
                description: '',
            };
            this.getProjects();
        },
    },
}


</script>
<style scope>

.local_box { padding:20px; background: #fff; position: absolute; 
   top: 20px;
    left: 0px;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden; 
 } 

.input_button_bg {
    background-color: #409eff !important;
    border-color: #409eff !important;
    color: #fff !important;
    margin:-1px -21px 0 -21px !important;
    border-radius: 0px 4px 4px 0;
    height: 40px !important;
}

.input_button_bg:hover {
    background: #66b1ff !important;
    border-color: #66b1ff !important;
    color: #fff !important;
}







</style>